import { PageContainer } from '@ant-design/pro-components';
import {
  Button,
  Card,
  Col,
  DatePicker,
  Divider,
  Form,
  Input,
  Row,
  Select,
  Space,
  Table,
  Tabs,
} from 'antd';
import './style.less';
import { useRef, useState } from 'react';
import TextArea from 'antd/lib/input/TextArea';

type TargetKey = React.MouseEvent | React.KeyboardEvent | string;

const initialItems = [
  {
    label: '补充协议1',
    children: (
      <div>
        <div className="modalTowTitle">
          <p>协议内容:</p>
          <Button className="button_color ">删除</Button>
        </div>
        <TextArea rows={4} />
      </div>
    ),
    key: '1',
    closable: false,
  },
  { label: '补充协议2', children: 'Content of 补充协议2', key: '2' },
  { label: '补充协议3', children: 'Content of 补充协议3', key: '3' },
];

export default () => {
  // 模块一表格定义
  const columns = [
    {
      title: '指定渠道编码',
      align: 'center',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '指定渠道名称',
      align: 'center',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '所在省',
      align: 'center',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  // 模块二定义
  const ModelFirstcolumns = [
    {
      title: '协议价（元）',
      align: 'center',
      dataIndex: 'name',
      key: 'name',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '票折（元）',
      align: 'center',
      dataIndex: 'age',
      key: 'age',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '购进指标量（大单位）',
      align: 'center',
      dataIndex: 'address',
      key: 'address',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '购进金额（万元）',
      align: 'center',
      dataIndex: 'purchase_amount',
      key: 'purchase_amount',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '纯销指标量（小单位）',
      align: 'center',
      dataIndex: 'net_sale',
      key: 'net_sale',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '纯销指标金额（万元）',
      align: 'center',
      dataIndex: 'net_amount',
      key: 'net_amount',
      render: () => <Input placeholder="请输入" />,
    },
  ];
  const ModelSecondcolumns = [
    {
      title: '分销奖励',
      align: 'center',
      dataIndex: 'name',
      key: 'name',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '费用科目',
      align: 'center',
      dataIndex: 'age',
      key: 'age',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '零售配送',
      align: 'center',
      dataIndex: 'address',
      key: 'address',
      render: () => (
        <Select defaultValue={'单选项1'} options={[{ label: '单选项1', value: '单选项1' }]} />
      ),
    },
    {
      title: '费用科目',
      align: 'center',
      dataIndex: 'purchase_amount',
      key: 'purchase_amount',
      render: () => (
        <Select defaultValue={'多选项1'} options={[{ label: '多选项1', value: '多选项1' }]} />
      ),
    },
    {
      title: '医疗配送商',
      align: 'center',
      dataIndex: 'net_sale',
      key: 'net_sale',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '费用科目',
      align: 'center',
      dataIndex: 'purchase_amount',
      key: 'purchase_amount',
      render: () => (
        <Select defaultValue={'多选项1'} options={[{ label: '多选项1', value: '多选项1' }]} />
      ),
    },
    {
      title: '自定义7',
      align: 'center',
      dataIndex: 'sevent',
      key: 'sevent',
      render: () => <DatePicker showTime />,
    },
    {
      title: '自定义8',
      align: 'center',
      dataIndex: 'eight',
      key: 'eight',
      render: () => <DatePicker showTime />,
    },
  ];

  const data = [
    {
      key: '1',
      name: 'BJ00090',
      age: '九州通药业有限公司',
      address: '浙江省',
    },
    {
      key: '2',
      name: 'BJ000192',
      age: '国药控股精华有限公司',
      address: '浙江省',
    },
    {
      key: '3',
      name: 'BJ000283',
      age: '老百姓药业有限公司',
      address: '浙江省',
    },
  ];
  const ModelFirstdata = [
    {
      key: '1',
      name: 'BJ00090',
      age: '九州通药业有限公司',
      address: '浙江省',
      purchase_amount: '1',
      net_sale: '1',
      net_amount: '1',
    },
  ];
  const ModelSeconddata = [
    {
      key: '1',
      name: 'BJ00090',
      age: '九州通药业有限公司',
      address: '浙江省',
      purchase_amount: '1',
      net_sale: '1',
      net_amount: '1',
      sevent: '1',
      eight: '1',
    },
  ];
  // 标签页的新增和删除
  const [activeKey, setActiveKey] = useState(initialItems[0].key);
  const [items, setItems] = useState(initialItems);
  const newTabIndex = useRef(0);

  const onChange = (newActiveKey: string) => {
    setActiveKey(newActiveKey);
  };

  const add = () => {
    const newActiveKey = `newTab${newTabIndex.current++}`;
    const newPanes = [...items];
    newPanes.push({ label: 'New Tab', children: 'Content of new Tab', key: newActiveKey });
    setItems(newPanes);
    setActiveKey(newActiveKey);
  };

  const remove = (targetKey: TargetKey) => {
    let newActiveKey = activeKey;
    let lastIndex = -1;
    items.forEach((item, i) => {
      if (item.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const newPanes = items.filter((item) => item.key !== targetKey);
    if (newPanes.length && newActiveKey === targetKey) {
      if (lastIndex >= 0) {
        newActiveKey = newPanes[lastIndex].key;
      } else {
        newActiveKey = newPanes[0].key;
      }
    }
    setItems(newPanes);
    setActiveKey(newActiveKey);
  };

  const onEdit = (
    targetKey: React.MouseEvent | React.KeyboardEvent | string,
    action: 'add' | 'remove',
  ) => {
    if (action === 'add') {
      add();
    } else {
      remove(targetKey);
    }
  };

  return (
    <PageContainer>
      <Form>
        <Divider dashed={true}>1. 协议主体</Divider>
        <Card>
          <Row>
            <Col span={8}>
              <Form.Item label="协议客户" name="协议客户" rules={[{ required: true }]}>
                <Space align="baseline">
                  <Button>选择客户</Button>
                  <p>上海正也医疗有限公司</p>
                </Space>
              </Form.Item>
            </Col>
            <Col span={8} offset={5}>
              <Form.Item label="协议状态" name="协议状态">
                <Select
                  defaultValue="正常"
                  style={{ width: 120 }}
                  options={[{ value: '正常', label: '正常' }]}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <Form.Item label="购进指标" name="购进指标">
                <Space align="baseline">
                  <Select
                    defaultValue="全部"
                    style={{ width: 120 }}
                    options={[{ value: '全部', label: '全部' }]}
                  />
                  <Input placeholder="输入金额/数量" />
                </Space>
              </Form.Item>
            </Col>
            <Col span={8} offset={5}>
              <Form.Item label="纯销指标" name="纯销指标">
                <Space align="baseline">
                  <Button>金额</Button>
                  <Input placeholder="输入金额/数量" />
                </Space>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <Form.Item label="销售区域" name="销售区域">
                <Space align="baseline">
                  <Button>选择区域</Button>
                  <Select
                    mode="multiple"
                    allowClear
                    placeholder="Please select"
                    defaultValue={['全国']}
                    options={[{ label: '全国', value: '全国' }]}
                  />
                </Space>
              </Form.Item>
            </Col>
            <Col span={8} offset={5}>
              <Form.Item label="签订时间" name="签订时间">
                <DatePicker showTime />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <Form.Item label="购进渠道" name="购进渠道">
                <Space align="baseline">
                  <Select
                    defaultValue="指定渠道"
                    style={{ width: 120 }}
                    options={[{ value: '指定渠道', label: '指定渠道' }]}
                  />
                  <Button>请选择渠道</Button>
                </Space>
              </Form.Item>
            </Col>
            <Col span={8} offset={5}></Col>
          </Row>
          <Table columns={columns} dataSource={data} pagination={false} size="small" />
        </Card>
        <Divider dashed={true}>2. 产品政策</Divider>
        <Space align="baseline" className="modalTowTitle">
          <Button type="primary">添加产品</Button>
          <p>购进总指标（万元）：￥152.65</p>
          <p>指标按季度分解（万元）：[Q1]￥12.5,[Q2]￥12.5,[Q3]￥12.5,[Q4]￥12.5</p>
          <p>纯销总指标（万元）：￥152.65</p>
        </Space>
        <Card>
          <Row>
            <Col span={8}>
              <Form.Item label="产品" name="产品">
                <Space align="baseline">
                  <Button>选择产品</Button>
                  <p className="modalTow_fontColor">美复胶丸（24粒/盒）</p>
                </Space>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="协议效期" name="协议效期">
                <DatePicker showTime />
              </Form.Item>
            </Col>
            <Col offset={6}>
              <Button className="button_color ">删除</Button>
            </Col>
          </Row>
          <Table
            columns={ModelFirstcolumns}
            dataSource={ModelFirstdata}
            pagination={false}
            size="small"
          />
          <Table
            columns={ModelSecondcolumns}
            dataSource={ModelSeconddata}
            pagination={false}
            size="small"
          />
        </Card>
        <Divider dashed={true}>3. 补充协议</Divider>
        <Card>
          <Tabs
            type="editable-card"
            onChange={onChange}
            activeKey={activeKey}
            onEdit={onEdit}
            items={items}
          />
        </Card>
        <Divider></Divider>
        <Card className="beachButton">
          <Button type="primary">保存</Button>
        </Card>
      </Form>
    </PageContainer>
  );
};
